﻿<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>捞海底商城后台管理系统</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="css/font.css">
	<link rel="stylesheet" href="css/xadmin.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <script src="lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/xadmin.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/hogan.js/3.0.2/hogan.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <!-- 顶部开始 -->
    <script type="text/javascript" src="./js/header.js"></script>
    <!-- 顶部结束 -->
    <!-- 中部开始 -->
    <div class="wrapper">
        <!-- 左侧菜单开始 -->
        <div class="left-nav">
          <div id="side-nav">
            <ul id="nav">
                <li class="list" current>
                    <a href="index.html">
                        <i class="iconfont">&#xe761;</i>
                        信息汇总
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                </li>
                <li class="list">
                    <a href="javascript:;">
                        <i class="iconfont">&#xe70b;</i>
                        用户管理
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu">
                        <li>
                            <a href="member-list.html">
                                <i class="iconfont">&#xe6a7;</i>
                                用户列表
                            </a>
                        </li>
                        <li>
                            <a href="member-del.html">
                                <i class="iconfont">&#xe6a7;</i>
                                用户删除
                            </a>
                        </li>
                        <li>
                            <a href="member-view.html">
                                <i class="iconfont">&#xe6a7;</i>
                                浏览记录
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="list" >
                    <a href="javascript:;">
                        <i class="iconfont">&#xe6a3;</i>
                        分类管理
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu">
                        <li>
                            <a href="category.html">
                                <i class="iconfont">&#xe6a7;</i>
                                分类列表
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="list">
                    <a href="javascript:;">
                        <i class="iconfont">&#xe6a3;</i>
                        订单管理
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu">
                        <li>
                            <a href="order.html">
                                <i class="iconfont">&#xe6a7;</i>
                                订单列表
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="list" >
                    <a href="javascript:;">
                        <i class="iconfont">&#xe6a3;</i>
                        轮播管理
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu" style="display:none">
                        <li>
                            <a href="banner-list.html">
                                <i class="iconfont">&#xe6a7;</i>
                                轮播列表
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="list" >
                    <a href="javascript:;">
                        <i class="iconfont">&#xe6a3;</i>
                        综合统计
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu" style="display:none">
                        <li>
                            <a href="echarts1.html">
                                <i class="iconfont">&#xe6a7;</i>
                                销售额统计
                            </a>
                        </li>
                        <li>
                            <a href="echarts2.html">
                                <i class="iconfont">&#xe6a7;</i>
                                销量排行
                            </a>
                        </li>
                        <li>
                            <a href="echarts4.html">
                                <i class="iconfont">&#xe6a7;</i>
                                售出占比
                            </a>
                        </li>
                        <li>
                            <a href="echarts5.html">
                                <i class="iconfont">&#xe6a7;</i>
                                股市走向
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
          </div>
        </div>
        <!-- 左侧菜单结束 -->
        <!-- 右侧主体开始 -->
        <div class="page-content">
          <div class="content">
            <!-- 右侧内容框架，更改从这里开始 -->
            <fieldset class="layui-elem-field layui-field-title site-title">
              <legend><a name="default">信息统计</a></legend>
            </fieldset>
            <table class="layui-table">
                <thead>
                    <tr>
                        <th>统计</th>
                        <th>访问量</th>
                        <th>新注册</th>
                        <th>商品库</th>
                        <th>订单数</th>
                        <!-- <th>管理员</th> -->
                    </tr>
                </thead>
                <tbody>
                    <tr class="total">
                        <td>总数</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <!-- <td>1</td> -->
                    </tr>
                    <tr class="today">
                        <td>今日</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <!-- <td>0</td> -->
                    </tr>
                    <tr class="yesterday">
                        <td>昨日</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <!-- <td>0</td> -->
                    </tr>
                    <tr class="week">
                        <td>本周</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <!-- <td>0</td> -->
                    </tr>
                    <tr class="month">
                        <td>本月</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <!-- <td>0</td> -->
                    </trcl>
                </tbody>
            </table>
            <table class="layui-table">
                <thead>
                    <tr>
                        <th colspan="2" scope="col">服务器信息</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th width="30%">服务器计算机名</th>
                        <td><span id="lbServerName">VM-4-3-ubuntu</span></td>
                    </tr>
                    <tr>
                        <td>服务器IP地址</td>
                        <td>1.116.147.57</td>
                    </tr>
                    <tr>
                        <td>服务器域名</td>
                        <td>无</td>
                    </tr>
                    <tr>
                        <td>服务器端口 </td>
                        <td>8080</td>
                    </tr>
                    <tr>
                        <td>本文件所在文件夹 </td>
                        <td>~/LaoMall</td>
                    </tr>
                    <tr>
                        <td>服务器操作系统 </td>
                        <td>Ubuntu</td>
                    </tr>
                    <tr>
                        <td>服务器的语言种类 </td>
                        <td>English</td>
                    </tr>
                    <tr>
                        <td>服务器当前时间 </td>
                        <td class="currentTime"></td>
                    </tr>
                    <tr>
                        <td>服务器上次启动到现在已运行 </td>
                        <td>28小时</td>
                    </tr>
                    <tr>
                        <td>CPU 总数 </td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>CPU 类型 </td>
                        <td>Intel(R) Xeon(R) CPU E5-26xx v4</td>
                    </tr>
                </tbody>
            </table>
            <!-- 右侧内容框架，更改从这里结束 -->
          </div>
        </div>
        <!-- 右侧主体结束 -->
    </div>
    <!-- 中部结束 -->
    <!-- 底部开始 -->
    <div class="footer">
        <div class="copyright">Copyright ©2022 海底捞商城 All Rights Reserved. 本后台系统由凌晨三点海底捞提供技术支持</div>  
    </div>
    <!-- 底部结束 -->
    <!-- 背景切换开始 -->
	<div class="bg-changer">
        <div class="swiper-container changer-list">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img class="item" src="images/a.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/b.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/c.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/d.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/e.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/f.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/g.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/h.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/i.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/j.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/k.jpg" alt=""></div>
                <div class="swiper-slide"><span class="reset">初始化</span></div>
            </div>
        </div>
        <div class="bg-out"></div>
        <div id="changer-set"><i class="iconfont">&#xe696;</i></div>   
    </div>
    <!-- 背景切换结束 -->
     <script>
        //show current Time and flush every second
        setInterval(function(){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var day = date.getDate();
            var hour = date.getHours();
            var minute = date.getMinutes();
            var second = date.getSeconds();
            var week = date.getDay();
            var weekArr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            var weekStr = weekArr[week];
            var currentTime = year+'年'+month+'月'+day+'日 '+hour+':'+minute+':'+second+' '+weekStr;
            $('.currentTime').text(currentTime);
        },1000);

        //get statistics data
        const host = 'http://1.116.147.57:8080';
        axios.get(`${host}/statistics`,null)
        .then(res => {
            console.log(res.data);
            td_total = $('tr.total').find('td')
            td_total.eq(1).text(res.data.data.accessCount)
            td_total.eq(2).text(res.data.data.newUserCount)
            td_total.eq(3).text(res.data.data.productCount)
            td_total.eq(4).text(res.data.data.orderCount)
        })
        .catch(err => {
            console.error(err); 
        })
        let para = ['today','yesterday','week','month']
        for (let i = 0; i < para.length; i++) {
            axios.get(`${host}/statistics/${para[i]}`,null)
            .then(res => {
                console.log(res.data);
                td_para = $('tr.'+para[i]).find('td')
                td_para.eq(1).text(res.data.data.accessCount)
                td_para.eq(2).text(res.data.data.newUserCount)
                td_para.eq(3).text(res.data.data.productCount)
                td_para.eq(4).text(res.data.data.orderCount)
            })
            .catch(err => {
                console.error(err); 
            })
        }
     </script>
</body>
</html>